<template>
  <div class="min-h-screen bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <!-- Header -->
      <div class="text-center mb-16">
        <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6 animate-fade-in-down">
          博客文章
        </h1>
        <p class="text-lg text-gray-600 max-w-2xl mx-auto animate-fade-in-up">
          探索最新的技术文章、编程教程和深度思考
        </p>
      </div>

      <!-- Search -->
      <div class="mb-12 flex justify-center">
        <div class="relative w-full max-w-lg">
          <input
            v-model="searchQuery"
            type="text"
            placeholder="搜索文章..."
            class="w-full pl-12 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-300 shadow-sm hover:shadow-md"
          >
          <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
            <svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>
        </div>
      </div>

      <!-- Loading State -->
      <div v-if="loading" class="flex items-center justify-center py-12">
        <div class="text-center">
          <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto mb-4"></div>
          <p class="text-gray-600">加载文章中...</p>
        </div>
      </div>

      <!-- Articles List -->
      <div v-else class="max-w-2xl mx-auto">
        <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
          <div class="divide-y divide-gray-100">
            <article
              v-for="post in filteredPosts"
              :key="post.id"
              class="px-10 py-6 hover:bg-gray-50 transition-colors duration-200 group cursor-pointer"
            >
              <router-link
                :to="`/post/${post.id}`"
                class="block"
              >
                <div class="flex items-center justify-between">
                  <h3 class="text-xl font-semibold text-gray-800 group-hover:text-primary-600 transition-colors duration-200 leading-relaxed break-words flex-1">
                    {{ post.title }}
                  </h3>
                  <span class="text-sm text-gray-500 ml-4 flex-shrink-0">点击阅读</span>
                </div>
              </router-link>
            </article>
          </div>
        </div>
      </div>

      <!-- Empty State -->
      <div v-if="filteredPosts.length === 0" class="text-center py-12">
        <div class="text-gray-400 text-6xl mb-4">📝</div>
        <h3 class="text-xl font-medium text-gray-900 mb-2">没有找到相关文章</h3>
        <p class="text-gray-600">尝试调整搜索条件</p>
      </div>

    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { getArticles } from '../services/articleService'

const searchQuery = ref('')
const allPosts = ref([])
const loading = ref(true)

// 加载文章数据
const loadArticles = async () => {
  try {
    loading.value = true
    allPosts.value = await getArticles()
  } catch (error) {
    console.error('加载文章失败:', error)
  } finally {
    loading.value = false
  }
}

// 计算过滤后的文章
const filteredPosts = computed(() => {
  let posts = allPosts.value

  // 按搜索关键词过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    posts = posts.filter(post => 
      post.title.toLowerCase().includes(query) ||
      post.excerpt.toLowerCase().includes(query) ||
      post.tags.some(tag => tag.toLowerCase().includes(query))
    )
  }

  return posts
})


// 组件挂载时加载文章
onMounted(() => {
  loadArticles()
})
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 淡入下降动画 */
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-down {
  animation: fadeInDown 0.8s ease-out;
}

/* 淡入上升动画 */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

/* 搜索框聚焦效果 */
input:focus {
  transform: scale(1.02);
}

/* 响应式优化 */
@media (max-width: 768px) {
  article {
    padding: 1rem 1.5rem;
  }
  
  h3 {
    font-size: 1.125rem;
  }
}
</style>
